<template>
  <div class="tween">
    <!-- <div class="demo">
      <p>方法名：TweenLite.to</p>
      <div class="to" style="background-color: aqua;width: 50px;height: 50px;"></div>
    </div> -->
    <!-- <div class="demo">
      <p>方法名：TweenMax.from</p>
      <div class="from" style="background-color: aqua;width: 50px;height: 50px;"></div>
    </div> -->
    <!-- <div class="demo">
      <p>方法名：TweenMax.fromTo</p>
      <div class="fromTo" style="background-color: aqua;width: 50px;height: 50px;margin: 0 auto;"></div>
    </div> -->
    <!-- <button @click="action" style="float: right;padding: 5px 10px;">点击开始</button> -->
    <table></table>
    <div>
      <button @click="play(null)" style="float: right; padding: 5px 10px">
        play
      </button>
      <button @click="pause" style="float: right; padding: 5px 10px">
        pause
      </button>
      <button @click="resume" style="float: right; padding: 5px 10px">
        resume
      </button>
      <button @click="reverse(null)" style="float: right; padding: 5px 10px">
        reverse
      </button>
      <button @click="playhandel" style="float: right; padding: 5px 10px">
        playhandel
      </button>
      <button @click="reversehandel" style="float: right; padding: 5px 10px">
        reversehandel
      </button>
      <button @click="timeScale" style="float: right; padding: 5px 10px">
        timeScale
      </button>
      <button @click="restart" style="float: right; padding: 5px 10px">
        restart
      </button>
      <button @click="action" style="float: right; padding: 5px 10px">
        action
      </button>
    </div>

    <!-- <div class="demo">
      <div>{{count.toFixed(2)}}</div>
    </div> -->
    <!-- <div class="demo">
      <div
        class="to"
        style="
          background-color: aqua;
          width: 50px;
          height: 50px;
          margin-top: 50px;
        "
      ></div>
    </div>
    <div class="demo">
      <div id="greenBox" style="
          background-color: aqua;
          width: 50px;
          height: 50px;
          margin-top: 50px;
          text-align: center;
          position: relative;
          line-height: 50px;
        ">0</div>
    </div> -->
    <!-- <div class="demo">
      <div class="box step1"></div>
      <div class="box step2 mt"></div>
      <div
        style="
          width: 200px;
          height: 100px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div class="box step3"></div>
        <div class="box step4"></div>
      </div>
      <div
        class="step5"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div> -->
    <!-- <div class="demo">
      <h2>中国 万岁！</h2>
      <h2>打到日本帝国主义！</h2>
      <h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium
        quia minus nulla ullam aut nobis voluptas rem, corporis voluptate
        laboriosam animi atque, ratione, nihil vero magni amet velit dolorum
        impedit.
      </h2>
    </div> -->
    <div class="demo">
      <div id="quote">
        SplitText makes it easy to break apart the text in an HTML element so
        that each character, word, and/or line is wrapped in its own div tag.
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      tween: "",
    };
  },
  methods: {
    action() {
      // TweenMax.to({ count: 0 }, 10, {
      //   count: 3,
      //   onUpdate: () => {
      //     this.count += 0.01;
      //   },
      // });
      // var tl = new TimelineMax();
      // tl.from(".step1", 0.5, {
      //   left: 100,
      //   opacity: 0,
      // });
      // tl.from(".step2", 0.5, {
      //   left: -100,
      //   opacity: 0,
      // });
      // tl.from(
      //   ".step3",
      //   0.5,
      //   {
      //     scale: 0.5,
      //     autoAlpha: 0, // 设置初始透明度为0
      //   },
      //   "+=.5"
      // ); // +=5 上次动画结束后延迟的时间 或者直接设置值默认为+=
      // tl.from(
      //   ".step4",
      //   0.5,
      //   {
      //     left: 100,
      //     autoAlpha: 0,
      //   },
      //   "-=0.25"
      // );
      // // tl.add("stagger", "+=0.5")
      // tl.staggerFrom('.step5>div', 1, {
      //   x: 100,
      // 	scale: 0,
      // 	autoAlpha: 0
      // }, 0.3,2);  // 0.3代表每个div的动画间隔  2代表第一个.step5>div和上一次动画结束的时间间隔
      // var tl = new TimelineMax({ repeat: 2, repeatDelay: 1, yoyo: true }); // 重复两次  每次重复延迟1s yoyo指动画完成后动画进行反转
      // tl.staggerTo(
      //   "h2",
      //   0.2,
      //   { className: "+=superShadow", top: "-=10px", ease: Power1.easeIn },
      //   "0.3"
      // );
      var $quote = document.getElementById("quote"),
        mySplitText = new SplitText($quote, { type: "words" }),
        splitTextTimeline = new TimelineLite();
      TweenLite.set($quote, { perspective: 400 });
      function kill() {
        splitTextTimeline.clear().time(0);
        mySplitText.revert();
      }
      // mySplitText.split({ type: "chars, words" });
      // splitTextTimeline.staggerFrom(
      //   mySplitText.chars,
      //   0.6,
      //   {
      //     scale: 4,
      //     autoAlpha: 0,
      //     rotationX: -180,
      //     transformOrigin: "100% 50%",
      //     ease: Back.easeOut,
      //   },
      //   0.02
      // );

      // mySplitText.split({ type: "words" });
      // $(mySplitText.words).each(function (index, el) {
      //   splitTextTimeline.from(
      //     $(el),
      //     0.6,
      //     { opacity: 0, force3D: true },
      //     index * 0.01
      //   );
      //   splitTextTimeline.from(
      //     $(el),
      //     0.6,
      //     { scale: index % 2 == 0 ? 0 : 2, ease: Back.easeOut },
      //     index * 0.01
      //   );
      // });

      mySplitText.split({ type: "lines" });
      splitTextTimeline.staggerFrom(
        mySplitText.lines,
        0.5,
        {
          opacity: 0,
          rotationX: -120,
          force3D: true,
          transformOrigin: "top center -150",
        },
        0.1
      );

      // mySplitText.split({ type: "chars, words, lines" });
      // splitTextTimeline
      //   .staggerFrom(
      //     mySplitText.chars,
      //     0.2,
      //     { autoAlpha: 0, scale: 4, force3D: true },
      //     0.01,
      //     0.5
      //   )
      //   .staggerTo(
      //     mySplitText.words,
      //     0.1,
      //     { color: "#8FE402", scale: 0.9 },
      //     0.1,
      //     "words"
      //   )
      //   .staggerTo(
      //     mySplitText.words,
      //     0.2,
      //     { color: "white", scale: 1 },
      //     0.1,
      //     "words+=0.1"
      //   )
      //   .staggerTo(mySplitText.lines, 0.5, { x: 100, autoAlpha: 0 }, 0.2);
    },
    play(time = null) {
      // 开始
      time ? this.tween.play(time) : this.tween.play();
    },
    // 暂停
    pause() {
      this.tween.pause();
    },
    resume() {
      // 当前位置继续动画
      this.tween.resume();
    },
    reverse(time = null) {
      // 反转
      time ? this.tween.reverse(time) : this.tween.reverse();
    },
    playhandel() {
      // 从第几秒播放
      this.play(3);
    },
    reversehandel() {
      // 从第三秒反转
      this.reverse(3);
    },
    timeScale() {
      // 按0.5倍速动画
      this.tween.timeScale(0.5);
    },
    restart() {
      // 重新开始
      this.tween.restart();
    },
  },
  mounted() {
    // this.tween = TweenMax.to(".to", 6, { x: 600, ease: Linear.easeNone });
    // this.tween.pause();
    //动画目标：div
    //起始状态：opacity:1
    //终点状态：opacity:0
    //补间：5秒完成状态改变
    // setTimeout(() => {
    //   TweenMax.staggerTo(".to", 2, { opacity: 0,x:200,y:200 });
    //   TweenMax.from(".from", 2, { opacity: 0,x:200,y:200 });
    //   TweenMax.staggerFromTo(".fromTo", 2, { opacity: 0,x:-200 },{ opacity: 1,x:200 });
    // }, 1000);
    // var box = document.getElementById("greenBox"),
    //   count = 0;
    // this.tween = TweenMax.to(box, 2, {
    //   left: "700px",
    //   repeat: 10,
    //   yoyo: true,
    //   onRepeat: onRepeat,
    //   repeatDelay: 0.5,
    //   ease: Linear.easeNone,
    // });
    // function onRepeat() {
    //   count++;
    //   box.innerHTML = count;
    //   TweenLite.set(box, {
    //     backgroundColor: "hsl(" + Math.random() * 255 + ", 90%, 60%)",
    //   });
    // }
  },
};
</script>
<style scoped lang="less">
.superShadow {
  text-shadow: 0 1px 0 hsl(174, 5%, 80%), 0 2px 0 hsl(174, 5%, 75%),
    0 3px 0 hsl(174, 5%, 70%), 0 4px 0 hsl(174, 5%, 66%),
    0 5px 0 hsl(174, 5%, 64%), 0 6px 0 hsl(174, 5%, 62%),
    0 7px 0 hsl(174, 5%, 61%), 0 8px 0 hsl(174, 5%, 60%),
    0 0 5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2),
    0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2),
    0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.3);
}
strong {
  font-size: 200px;
}
h2 {
  padding: 20px;
  background-color: #ddd;
  color: #fff;
  margin: 0;
}
.tween {
  text-align: center;
  .demo {
    margin: 0 auto;
    width: 50%;
    margin-top: 100px;
    p {
      color: dodgerblue;
    }
    font-weight: bold;
    font-size: 20px;
    color: dodgerblue;
  }
}
.box {
  width: 50px;
  height: 50px;
  background-color: rgb(255, 0, 0);
  position: relative;
}
.mt {
  margin-top: 20px;
}
</style>
